<?php
if (!defined('IN_XLP')) {
    exit('Access Denied');
}
$Document = array(
    'pageid' => 'index-search', //页面标示
    'pagename' => '地下城与勇士', //当前页面名称
    'mycss' => array('mobile/style'), //加载的css样式表
    'myjs' => array('global/jquery-1.9.0.min','global/layer/layer'), //加载的js脚本
    'footerjs'=>array(),
    'head'=>true//是否加载头部文件
);
include getTpl('header', 'public');
?>
<body>
<div class="overlay mask"></div>
<div  class="choose_info" style="background: #efeff4;padding-bottom: 2vw">
    <!-- <div class="search">
        <input type="text" value="地下城与勇士" />
        <b></b>
    </div> -->
    <div class="choose">
        <div class="choose_area time">
            <span>选择时间：</span>
            <b id="selectTime"> 请选择时间日期 </b>
            <div class="choose_detail" id="timeBox">
                <ul id="date_type_ul">
                    <li data-dateType="year" id="yearTxt">查看年</li>
                    <li data-dateType="month" id="monthTxt">查看月</li>
                    <li data-dateType="day" id="dateTxt">查看日</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="choose">
        <div class="choose_area">
            <span>选择区服：</span>
            <b onclick="getGameArea(this)" data-abir="<?php echo $gm; ?>" id="serverName"><?php echo $server ?></b>
            <div class="choose_detail  c_d" id="areaServer"></div>
        </div>
        <div class="choose_area">
            <span>选择类型：</span>
            <b><?php echo $type ?></b>
            <div class="choose_detail c_d">
                <ul>
                    <?php foreach ($types as $v): ?>
                        <li><?php echo $v['name'] ?></li>
                    <?php endforeach ?>
                </ul>
            </div>
        </div>
    </div>
    <div class="choose">
        <div class="choose_area time">
            <span>选择身份：</span>
            <b><?php echo $cr == 'buyer' ? '买家':'卖家'; ?></b>
            <div class="choose_detail c_d">
                <ul>
                    <li onclick="chooseIdent('buyer')">买家</li>
                    <li onclick="chooseIdent('seller')">卖家</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="market_list"></div>
<?php include getTpl('footer', 'public');  ?>
<form id="recordsForm">
    <input type="hidden" name="g" value="<?php echo $gm ?>">
    <input type="hidden" name="a" value="<?php echo $ar ?>">     
    <input type="hidden" name="t" value="<?php echo $ty ?>">     
    <input type="hidden" name="c" value="<?php echo $cr ?>">
    <input type="hidden" name="year">
    <input type="hidden" name="month">
    <input type="hidden" name="day">
    <input type="hidden" name="density">
</form>
<div class="data">
        <ul id="date_ul" style="display: none;">

        </ul>
        <ul id="date_ul1" style="display: none;">
            
        </ul>
        <ul id="date_ul2" style="display: none;">
            
        </ul>
</div>
<script type="text/javascript">
    getRecordsData();

    function getRecordsData() {
        var url = "<?php echo U('index/getRecordsData') ?>";
        var index = layer.load(1, {
          shade: [0.1,'#fff'] //0.1透明度的白色背景
        });
        $.post(url , $('#recordsForm').serialize(), function(result){
            if(result.status){
                layer.close(index);
                $(".market_list").html(result.data);
            }
            
        },'json');
    }
</script>
<script>
$("#date_type_ul").delegate('li', 'click', function(){
    var type = $(this).attr("data-dateType");
})

//选择年份
function chooseYear(year) {
    $("#date_ul").hide();
    $("#timeBox").hide();
    $(".mask").removeClass("active");
    $("#yearTxt").html(year);
    var timeStr = parseInt(year) - 10 + ' - ' + year;
    $("#selectTime").text(timeStr);
    $("input[name='density']").val('year');
    $("input[name='year']").val(year);
    getRecordsData();
}

//选择月份
function chooseMonth(month) {
    $("#date_ul1").hide();
    $("#timeBox").hide();
    $("#monthTxt").html(month);
    var year = $("input[name='year']").val() ? $("input[name='year']").val() : new Date().getFullYear();
    if(month == 12) {
        var timeStr = year+'/1'+' - ' + year + '/' + month;
    }else{
        var timeStr = (year-1)+'/'+(month+1)+' - ' + year + '/' + month;
    }
    $("#selectTime").text(timeStr);
    $("input[name='density']").val('month');
    $("input[name='month']").val(month);
    getRecordsData();
}


//选择天数
function chooseDay(day) {
    $("#date_ul2").hide();
    $("#timeBox").hide();
    $("#dateTxt").html(day);
    var year = $("input[name='year']").val() ? $("input[name='year']").val() : new Date().getFullYear();
    var month = $("input[name='month']").val() ? $("input[name='month']").val() : new Date().getMonth()+1;
    var end = year+'/'+month+'/'+day;
    var start = new Date(new Date(end).getTime() - 11 * 3600 * 24 * 1000).toLocaleDateString();
    var timeStr = start+' - '+end;
    $("#selectTime").text(timeStr);
    $("input[name='density']").val('day');
    $("input[name='day']").val(day);
    getRecordsData();
}


// 获取区信息
function getGameArea(obj) {
    var gm = $(obj).attr('data-abir');
    $.getJSON("<?php echo U('index/getArea') ?>",{gm:gm},function(result){
        if(result.status) {
            $('#areaServer').html(result.data);
        }
    });
}

// 获取服信息
function getGameServer(obj) {
    var area_id = $(obj).attr('data-id');
    $.getJSON("<?php echo U('index/getServer') ?>",{area_id:area_id},function(result){
        if(result.status) {
            $('#areaServer').html(result.data);
        }
    });
}


// 选择区信息
function chooseServer(obj) {
    var server = $(obj).attr('data-abri');  
    $("#serverName").text($(obj).text());
    $(obj).parents(".choose_detail").removeClass('active');
    $(".mask").removeClass("active");
    $("input[name='a']").val(server);
    getRecordsData();
}


//选择身份
function chooseIdent(ident) {
    $("input[name='c']").val(ident);
    getRecordsData();
}

var now_date = new Date();
var year = now_date.getFullYear();
var month = now_date.getMonth()+1;
var date = now_date.getDate();
var min_year = parseInt(year) - 10;
var max_year = parseInt(year) + 10;
for(var i = min_year; i < max_year; i++) {
    var li_str = "";
    if( i == year ) {
        li_str = "<li id='active' onclick='chooseYear("+ i +")'> " + i + " </li>"
    }
    else {
        li_str = "<li onclick='chooseYear("+ i +")'> " + i + " </li>"
    }
    $("#date_ul").append(li_str);
}


// var y='',m='',d='';

// $("#date_ul li").on("click",function(){
//     y = $(this).html();
//     $("#yearTxt").html($(this).html())

//     $("#date_ul").hide();
//     $("#timeBox").hide();

//     $("#selectTime").html(y+m+d);

//     $(".mask").removeClass("active");
// });

// $("#date_ul1").on("click","li",function(){
//     m = $(this).html();
//     $("#monthTxt").html($(this).html())
//     $("#date_ul1").hide();
//     $("#timeBox").hide();

//     $("#selectTime").html(y+m+d);
// });

// $("#date_ul2").on("click","li",function(){
//     d = $(this).html();
//     $("#dateTxt").html($(this).html())
//     $("#date_ul2").hide();
//     $("#timeBox").hide();

//     $("#selectTime").html(y+m+d);
// });

$("#selectTime").click(function(){
    $("#timeBox").show();
})


$(".data ul li").click(function(){
    $(".mask").removeClass("active");
})

//点击年
$("#yearTxt").click(function(){
    $("#date_ul").show();
    $("#date_ul1").hide();
    $("#date_ul2").hide();
    $(".mask").addClass("active");

    $("#date_ul").animate({
        scrollTop: $("#active").position().top - 80
    })
})

//点击月
$("#monthTxt").click(function(){
    $("#date_ul").hide();
    $("#date_ul2").hide();
    $("#date_ul1").show();
    $(".mask").removeClass("active");

    var _arr = [1,2,3,4,5,6,7,8,9,10,11,12];
    var _monthHtml = "";
    $.each(_arr,function(i,o){
        if(o==month){
            _monthHtml+= "<li id='active1' onclick='chooseMonth("+ o +")'> " + o + " </li>";   
        }else{
            _monthHtml+= "<li onclick='chooseMonth("+ o +")'> " + o + " </li>";
        }
        
    });

    $("#date_ul1").html(_monthHtml)

    $("#date_ul1").animate({
        scrollTop: $("#active1").position().top - 80
    })

})

//点击日
$("#dateTxt").click(function(){
    $("#date_ul").hide();
    $("#date_ul1").hide();
    $("#date_ul2").show();
    $(".mask").removeClass("active");

    var _year = $("#yearTxt").html();
    var _month = $("#monthTxt").html();

    var _dateLi = getDays(_year,_month);
//  console.log(_dateLi)

    var _dateHtml = "";
    $.each(_dateLi,function(i,o){
        if(o==date){
            _dateHtml+= "<li id='active2' onclick='chooseDay("+ o +")'> " + o + " </li>";    
        }else{
            _dateHtml+= "<li onclick='chooseDay("+ o +")'> " + o + " </li>";
        }
        
    });

    $("#date_ul2").html(_dateHtml)


    $("#date_ul2").animate({
        scrollTop: $("#active2").position().top - 80
    })

    /*$("#date_ul2").animate({
        scrollTop: $("#active1").position().top - 90
    })*/

})




//获取天数
function getDays(year, month) {
  let daysInMonth;
  const bigMonth = month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12;
  
  if (month == 2) {
    daysInMonth = year % 4 == 0 ? 29 : 28;
  } else {
    daysInMonth = bigMonth ? 31 : 30;
  }

  const arr = [];
  for (let i = 1; i <= daysInMonth; i++) {
    arr.push(i);
  }

  return arr;
}

$(".choose_area b").click(function(){
    $(this).parents(".choose_area").find(".choose_detail").addClass("active");
    $(".mask").addClass("active");
})
    $(".choose_detail.c_d li").click(function(){
        var area=$(this).html();
        $(this).parents(".choose_area").find("b").html(area);
        $(this).parents(".choose_detail").removeClass("active");
        $(".mask").removeClass("active");
    })

    $(".search input").focus(function(){
        $(this).parents(".search").addClass("on");
    })
</script>
</body>
</html>